<html>

<head>

<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/base/jquery-ui.css" rel="stylesheet">

<style>

div, td, th { 
	color: black; 
}

</style>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>

<script>
  

// Traverse the bookmark tree, and print the folder and nodes.
  

function dumpBookmarks(query) {
    
	var bookmarkTreeNodes = chrome.bookmarks.getTree(
function(bookmarkTreeNodes) {
        
		$('#bookmarks').append(dumpTreeNodes(bookmarkTreeNodes, query));
      
	});
  
}
  

function dumpTreeNodes(bookmarkNodes, query) {
    
	var list = $('<ul>');
    
	var i;
    
	for (i = 0; i < bookmarkNodes.length; i++) {
      
		list.append(dumpNode(bookmarkNodes[i], query));
    
	}
    
	return list;
  
}
  

function dumpNode(bookmarkNode, query) {
    
	if (bookmarkNode.title) {
      
		if (query && !bookmarkNode.children) {
        
			if (String(bookmarkNode.title).indexOf(query) == -1) {
          
				return $('<span></span>');
        
			}
      
		}
     
 		
		var anchor = $('<a>');
      
		anchor.attr('href', bookmarkNode.url);
      
		anchor.text(bookmarkNode.title);
      

		anchor.click(function() {

			chrome.tabs.create({url: bookmarkNode.url});
      
		});
      
	
		var span = $('<span>');
    
		var edit = bookmarkNode.children ? $('<table><tr><td>Name</td><td>' + '<input id="title"></td></tr><tr><td>URL</td><td><input id="url">' +
 '</td></tr></table>') : $('<input>');

      	
		     
		span.hover(function() {
               
			$('#adddialog').empty().dialog({autoOpen: false, 
closeOnEscape: true, modal: true }).dialog('open');
  
		}).append(anchor);       
      

	}
    

	var li = $(bookmarkNode.title ? '<li>' : '<div>').append(span);

    
	if (bookmarkNode.children && bookmarkNode.children.length > 0) 	{
      
		li.append(dumpTreeNodes(bookmarkNode.children, query));
    
	}
    

return li;
  
}

</script>

</head>

	<body onload="dumpBookmarks();
	"style="width: 400px">

	<div id="bookmarks"></div>
</body>

</html>